<template>
    <el-card class="xx-card" style="padding: 10px;">
        <form-create
            v-model="queryForm"
            v-model:api="fApi"
            :rule="rule"
            :option="options"
        />

        <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridOn">
            <template #action="{ row }">
                <el-link type="danger" @click="deleteItByRow('software', row)">
                    删除
                </el-link>
                <el-link
                    type="warning"
                    style="margin-left: 10px;"
                    @click="editItByRow('rj/editRj', row)"
                >
                    编辑
                </el-link>
            </template>
        </vxe-grid>
    </el-card>
</template>

<script setup>
import { vxeGridConfig } from '@/util/vxeTableConfig'
import { reactive, ref } from 'vue'
import axios from 'axios'
import bus from '@/util/bus'
import { Edit, Share, Box, Search, Plus } from '@element-plus/icons-vue'

const fApi = ref({})
const xGrid = ref({})
const route = useRouter()

const queryForm = ref({
    name: '',
    status: ''
})

const loadStage = (id, key) => {
    axios.post('/download/mon/stage', { id })
        .then(res => {
            let val =  rule.value.find(it => it.field === key)
            val.props.options = res.data.data.stage.map(it => ({ label: it.name, value: it.id }))
        })
}

const loadLabels = () => {
    axios.post('/download/software/label', {  })
        .then(res => {
            let val =  rule.value.find(it => it.field === 'labelId')
            val.props.options = res.data.data.label.map(it => ({ label: it.name, value: it.id }))
        })
}

loadLabels()
loadStage(0, 'firstStageId')

const rule = ref([
    {
        type: 'input',
        title: '名称',
        field: 'name',
        props: {
            style: 'width:100px',
            clearable: true,
            placeholder: '请输入名称'
        }
    },
    {
        type: 'ElSelectV2',
        title: '第一级',
        field: 'firstStageId',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: []
        },
        on: {
            change: val => {
                loadStage(val, 'secondStageId')
                queryForm.value.secondStageId = ''
                queryForm.value.thirdStageId = ''
            }
        }
    },
    {
        type: 'ElSelectV2',
        title: '第二级',
        field: 'secondStageId',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: []
        },
        on: {
            change: val => {
                loadStage(val, 'thirdStageId')
                queryForm.value.thirdStageId = ''
            }
        }
    },
    {
        type: 'ElSelectV2',
        title: '第三级',
        field: 'thirdStageId',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: []
        }
    },
    {
        type: 'ElSelectV2',
        field: 'state',
        title: '是否生效',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '生效',
                    value: 0
                },
                {
                    label: '失效',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElSelectV2',
        field: 'isFocus',
        title: '是否焦点',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '是',
                    value: 0
                },
                {
                    label: '否',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElSelectV2',
        field: 'isGreen',
        title: '是否绿色',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '是',
                    value: 0
                },
                {
                    label: '否',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElSelectV2',
        field: 'isNecessary',
        title: '是否必备',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '是',
                    value: 0
                },
                {
                    label: '否',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElSelectV2',
        field: 'isRecommend',
        title: '是否推荐',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '是',
                    value: 0
                },
                {
                    label: '否',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElButton',
        children: ['搜索'],
        props: { type: 'primary', round: true, icon: Search },
        on: {
            click: () => {
                xGrid.value.commitProxy('reload')
            }
        }
    },
    {
        type: 'ElButton',
        children: ['添加'],
        props: { type: 'success', round: true, icon: Plus },
        on: {
            click: () => {
                route.push('/rj/editRj')
            }
        }
    }
])

const options = ref({
    submitBtn: false,
    resetBtn: false,
    form: {
        inline: true,
        labelPosition: 'right',
        size: 'mini',
        labelWidth: '90px',
        hideRequiredAsterisk: false,
        showMessage: true,
        inlineMessage: false
    }
})

const loadByQuery = ({ page, sorts, filters, form }) => {
    return axios.post('/download/software/page', {
        ...queryForm.value,
        pageNum: page.currentPage,
        pageSize: page.pageSize
    })
}

const columns = [
    { type: 'seq', title: '序号', width: 46 },
    {
        field: 'id',
        title: 'ID'
    },
    {
        field: 'name',
        title: '名称'
    },
    {
        field: 'firstStageName',
        title: '一级'
    },
    {
        field: 'secondStageName',
        title: '二级'
    },
    {
        field: 'thirdStageName',
        title: '三级'
    },
    {
        field: 'labelName',
        title: '标签'
    },
    {
        field: 'recommendIndex',
        title: '推荐指数'
    },
    {
        field: 'size',
        title: '大小'
    },
    {
        field: 'downCount',
        title: '下载量'
    },
    {
        field: 'likeNum',
        title: '点赞量'
    },
    {
        field: 'commentNum',
        title: '评论量'
    },
    {
        field: 'focusName',
        title: '是否焦点'
    },
    {
        field: 'greenName',
        title: '是否绿色'
    },
    {
        field: 'necessaryName',
        title: '是否必备'
    },
    {
        field: 'recommendName',
        title: '是否推荐'
    },
    {
        field: 'stateName',
        title: '是否生效'
    },
    {
        field: 'acttion',
        title: '操作',
        slots: {
            default: 'action'
        }
    }
]

const toolbarConfig = {
    // buttons: [
    //   { code: "insert_actived", name: "新增" },
    //   { code: "delete", name: "直接删除" },
    // ],
    refresh: true,
    export: true,
    zoom: true,
    custom: true
}

const gridOptions = reactive({
    ...vxeGridConfig(loadByQuery),
    toolbarConfig,
    exportConfig: { types: ['csv'] },
    columns
    //   columns: columns.value,
})

bus.on('reload', () => {
    xGrid.value.commitProxy('reload')
})
onBeforeUnmount(() => {
    bus.off('reload')
})

const gridOn = reactive({})
</script>

<style lang="scss">
// .vxe-form--item-content{
//   max-height: 20px;;
// }
</style>
